<template>
  <view class="main">
    <view class="layout-doc">
      <view class="layout-box">
        <!-- 直播详情 -->
        <view class="liveTitle">直播介绍</view>
        <view class="liveDetails">
          <view class="liveName">主题</view>
          <view class="liveText">{{ liveDataSource.title }}</view>
        </view>
        <view class="liveDetails">
          <view class="liveName">时间</view>
          <view class="liveText"
            >开始时间： {{ liveDataSource.start_time }}</view
          >
          <view class="liveText">结束时间： {{ liveDataSource.end_time }}</view>
        </view>
		<view class="liveDetails">
			<view class="liveName">
				直播描述
			</view>
			<view class="liveText liveDsc">
				{{liveDataSource.content}}
			</view>
		</view>
        <view class="liveBtnBox">
          <view
            class="liveEntry"
            style="background: linear-gradient(227deg, #fb6f3f 0%, #fe3001 98%)"
            v-if="liveDataSource.status == 1"
            @click="liveBtn(liveDataSource)"
          >
            <image
              style="width: 54rpx; height: 54rpx"
              :mode="item.mode"
              src="@/pagesB/static/img/live/videoImg.png"
            ></image>
            <view>进入直播</view>
          </view>
			<view
			class="liveEntry"
			v-if="liveDataSource.status == 0"
			@click="liveBtn(liveDataSource)"
			>
				<view style="margin-left: 10rpx">
				{{ liveDataSource.start_time }}开播
				</view>
			</view>
			<view
			class="liveEnd"
			v-if="liveDataSource.status == 2"
			@click="liveBtn(liveDataSource)"
			>
            <view style="margin-left: 10rpx">直播已结束</view>
          </view>
        </view>
      </view>
      <view class="layout-box">
        <view class="liveTitle liveLine">回放列表</view>
        <view
		class="liveReplayItem"
		v-for="(item, index) in replayList"
		:key="index"
        >
          <view>
            <view style="font-weight: 600">回放第{{ index + 1 }}节</view>
            <view class="liveReplayText">开播时间：{{ item.startTime }}</view>
          </view>
          <view>
            <view
			class="liveReplayBtn"
            @click="toReplay(item.channelMeetingPlaybackId)"
            >
			  观看回放
			</view>
          </view>
        </view>

        <u-empty
          v-if="replayList.length < 1"
          margin-top="30"
          text="没有回放内容"
        />
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/pagesB/common/js/request/userInfo.js";
import focusConfig from '@/pagesB/focus.config.js'

export default {
  // 页面数据
  data() {
    return {
      // 直播信息
      liveDataSource: {},
      shortData: {},
      btnText: "",
      liveId: "",
      toKen: "",
      replayList: [],
    };
  },
	onPullDownRefresh(){
		this.getLiveDetail();
		this.getLiveList();
	},
  // 页面显示
  onShow() {
    // 获取临时缓存信息
    var short = uni.$focus.varShortTime("get");
    if (short) {
      this.shortData = short;
    }
    this.getLiveDetail();
    this.getLiveList();
  },

  onLoad(options) {
    this.liveId = options.id ? options.id : options.liveID;
  },

  // 分享到聊天
  onShareAppMessage() {},

  // 页面事件
  methods: {
    /**
     * @description 获取直播详情
     */
    getLiveDetail() {
      request.getLiveDetail({
        data: {
          urlData: {
            id: this.liveId,
          },
        },
        success: (res) => {
          this.liveDataSource = res;
		  uni.stopPullDownRefresh()
        },
		fail:()=>{
			uni.stopPullDownRefresh()
		}
      });
    },

    /**
     * @description 直播按钮点击
     * @param {Object} status
     */
    liveBtn(detail) {
		
      //当前直播状态 0未开始 1直播中 2已结束
      if (0 === detail.status) {
        uni.showToast({
          title: "直播未开始",
          icon: "none",
        });
      } else if (1 === detail.status) {
        // 获取直播地址
		this.userInfoGetReq()
        this.getLiveUrl(detail.id);
      } else {
        uni.showToast({
          title: "直播已结束",
          icon: "none",
        });
      }
    },

	userInfoGetReq () {
		request.userInfoGet({
			success: res => {
				request.submitLive({
					data: {
						live_plan_id: this.liveId, // 直播ID
						type: 2 , // 登记状态
						mobile: res.info.mobile2, 
						name: res.info.realname,
						id_card: res.info.id_card2,
						project_name: res.info.project,
						work_name: res.info.company,
					}
				})
			},
		});
	},

    /**
     * @description 获取直播地址
     * @param {Object} id
     */
    getLiveUrl(id) {		
		uni.showLoading({ title: '加载中...' });
		request.getLiveUrl({
			data: {
				urlData: {
				id: this.liveId,
			},
        },
        errToast: false,
        success: (res) => {
          uni.request({
            url: `${focusConfig.http.selfHttp}/live/v1/channelMeeting/watchAuth?planId=${this.liveId}`, 
            header: {
				token: this.shortData.token, 
            },
            success: (res) => {
				if(res.data.data.platformType===1){
					uni.hideLoading();
					const url = `/pages/tabbar/study/live/livePage/index?url=${encodeURIComponent(res.data.data.watchUrl)}`;
					uni.navigateTo({url})
				}else{
					let { planAppUrl , platformAppId } = res.data.data
					uni.hideLoading();
					uni.navigateToMiniProgram({
						appId: platformAppId,
						path: planAppUrl,
					})
				}
			 
            },
          });
        },
        fail: () => {
		  uni.hideLoading();
          uni.showModal({
            title: "提示",
            content: "网络繁忙，请稍后再试",
            showCancel: false,
            confirmColor: "#1890FF",
          });
        },
      });
    },

    getLiveList() {
      uni.request({
        url: `${focusConfig.http.selfHttp}/live/v1/channelMeeting/playbackList`, 
        data: {
			planId: this.liveId,
        },
        header: {
			token: this.shortData.token, 
        },
        success: (res) => {
			this.replayList = res.data.data;
			this.text = "request success";
			uni.stopPullDownRefresh()
        },
		fail(res) {
			uni.stopPullDownRefresh()
		}
      });
    },

    toReplay(val) {
		this.userInfoGetReq()
		uni.showLoading({ title: '加载中...' });
        uni.request({
        url: `${focusConfig.http.selfHttp}/live/v1/channelMeeting/playbackUrl`, 
        data: {
          channelMeetingPlaybackId: val,
        },
        header: {
          token: this.shortData.token, 
        },
        success: (res) => {
			if(res.data.data.platformType == 1){
				const url = `/pages/tabbar/study/live/liveReplay/index?url=${encodeURIComponent(res.data.data.fileUrl)}`;
				uni.navigateTo({url})
			}else{
				let { planAppUrl , platformAppId }=res.data.data
				uni.hideLoading();
				uni.navigateToMiniProgram({
					appId: platformAppId,
					path: planAppUrl,
				})
			}
			this.text = "request success";
				uni.hideLoading();
        },
        fail: () => {
			uni.showModal({
				title: "提示",
				content: "网络繁忙，请稍后再试",
				showCancel: false,
				confirmColor: "#1890FF",
			});
			uni.hideLoading();
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
	page{
		min-height: 100%;
	}
.main {
  background-color: #f5f5f5;
}

.layout-doc {
  width: 100%;
  height: 100%;
}

.layout-box {
  padding: 32rpx;
  border-radius: 12rpx;
  background-color: #fff;
}

.layout-box:last-child {
  margin-top: 20rpx;
}

.liveTitle {
  opacity: 1;
  font-size: 34rpx;
  font-family: -700;
  font-weight: bold;
  color: #000000;
}
.liveLine {
  padding-bottom: 26rpx;
  border-bottom: 1rpx solid #ccc;
}
.liveName {
  margin-top: 40rpx;
  opacity: 1;
  font-size: 30rpx;
  font-family: -400;
  font-weight: 700;
  padding-left: 10rpx;
}
.liveText {
  word-wrap: break-word;
  width: 600rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #7f7f7f;
  font-family: PingFang, PingFang-Medium;
  font-weight: 500;
}
 .liveText.liveDsc{
	white-space: pre-line;
	width: 650rpx;
	font-size: 26rpx;
	font-family: PingFangSC, PingFangSC-Regular;
	font-weight: 400;
	text-align: start;
	color: #7f7f7f;
	line-height: 40rpx;
	height: auto;
}
.liveBtnBox {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.liveEntry {
  width: 540rpx;
  height: 78rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  background: #1890ff;
  border-radius: 140rpx;
  font-size: 32rpx;
  font-family: -400;
  font-weight: 400;
  color: #ffffff;
}

.line {
  /* width: 100%; */
  height: 2rpx;
  margin: 40rpx 0 40rpx 0;
  background-color: #ccc;
}

.liveReplayList {
  width: 710rpx;
  height: 120rpx;
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #ccc;
}

.liveReplayText {
  margin-top: 20rpx;
  font-size: 26rpx;
  font-family: -400;
  font-weight: 400;
  color: #aaaaaa;
}

.liveReplayItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}

.liveReplayBtn {
  width: 160rpx;
  height: 58rpx;
  line-height: 58rpx;
  text-align: center;
  border: 1rpx solid #ccc;
  border-radius: 72rpx;
  background-color: #4a87fd;
  font-size: 24rpx;
  color: #fff;
}

.liveEnd {
  width: 540rpx;
  height: 78rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  margin-bottom: 20rpx;
  background: #d7d7d7;
  border-radius: 140rpx;
  font-size: 32rpx;
  font-family: -400;
  font-weight: 400;
  color: #ffffff;
}
</style>
